<template>
	<view class="content">
		<view class="main-container">
			<image class="image1" src="/static/index/logo-zn-big.png" mode=""></image>
			<image class="image2" src="/static/index/message.png" mode=""></image>
		</view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval">
					<swiper-item v-for="(item, index) in list" :key="index">
						<view>
							<image class="slide-image" :src="item.url" />
						</view>
					</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="middle-nav">
			<view class="nav" @tap="jump('recharge')">
				<image src="/static/index/recharge.png" mode=""></image>
				<view class="text">
					充值
				</view>
			</view>
			<view class="nav" @tap="jump('cash')">
				<image src="/static/index/cashout.png" mode=""></image>
				<view class="text">
					提现
				</view>
			</view>
			<view class="nav">
				<image src="/static/index/share.png" mode=""></image>
				<view class="text">
					分享
				</view>
			</view>
			<view class="nav">
				<image src="/static/index/financial.png" mode=""></image>
				<view class="text">
					理财
				</view>
			</view>
		</view>
		<view class="member-news">
			<view class="vip-active"></view>
			<text class="text">会员动态</text>
		</view>
		<view class="shopping-wrap">
			<text>aa12**22</text>
			<text>购物成功</text>
			<text class="commission">获得佣金356.80</text>
		</view>
		<view class="void-wrap"></view>
		<view class="suggest-wrap">
			<view class="nav-footer" @click="changeSuggest(1)" :class="current == 1 ? 'active' : ''">
				合作代理
				<image v-if="current == 1" src="/static/index/tab-label.png" mode=""></image>
			</view>
			<view class="nav-footer" @click="changeSuggest(2)" :class="current == 2 ? 'active' : ''">
				平台简介
				<image v-if="current == 2" src="/static/index/tab-label.png" mode=""></image>
			</view>
			<view class="nav-footer" @click="changeSuggest(3)" :class="current == 3 ? 'active' : ''">
				规则说明
				<image v-if="current == 3" src="/static/index/tab-label.png" mode=""></image>
			</view>
			<view class="nav-footer" @click="changeSuggest(4)" :class="current == 4 ? 'active' : ''">
				公司介绍
				<image v-if="current == 4" src="/static/index/tab-label.png" mode=""></image>
			</view>
		</view>
		<view class="main-text" v-if="current == 1">
			亚马逊书店的营销策略主要有:（1）产品策略 亚马逊书店根据所售商品的种类不同，分为三大类：书籍（BOOK）、音乐（MUSIC）和影视产品（VIDEO），每一类都设置了专门的页面，同时，在各个页面中也很容易看到其他几个页面的内容和消息，它将书店中不同的商品进行分类，并对不同的电子商品实行不同的营销对策和促销手段。
			例如，在音乐类商品中，书店承诺：“You’ll enjoy everyday savings of up to 40% on CDs, including up to 30% off Amazon.com’s 100 best-sellong CDs(对CD类给40%的折扣，其中包括对畅销CD的30%的回扣)。
			上搜索书籍网站时就可以看到亚马逊书店的广告。
		</view>
		<view class="main-text" v-if="current == 2">
			据悉，亚马逊新建成的广州运营中心总面积达17万平方米，投资金额超3亿元，辐射区域包括广东、广西、福建、云南和海南等地，全面启用后，可以为广州、深圳、东莞、佛山和中山五个地区的消费者提供“当日到达”快递配送服务，一般情况下，这五个城市的消费者只要在上午11点钟前下订单，当日就可以收到订购的商品。
		</view>
		<view class="main-text" v-if="current == 3">
			亚马逊公司创立于1995年，目前已成为全球商品品种最多的网上零售商和全球第3大互联网公司，在公司名下，也包括了AlexaInternet、a9、lab126、和互联网电影数据库（InternetMovieDatabase，IMDB）等子公司。
		</view>
		<view class="main-text" v-if="current == 4">
			亚马逊中国是一家中国B2C电子商务网站，前身为卓越网，被亚马逊公司收购后，成为其子公司。
			卓越网创立于2000年，为客户提供各类图书、音像、软件、玩具礼品、百货等商品。
			致力于从低价、选品、便利三个方面为消费者打造一个可信赖的网上购物环境。
			亚马逊中国是全球最大的电子商务公司亚马逊在中国的网站。
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				list: [
					{
						id: 1,
						content: '内容 A',
						url: '/static/index/bg-English.png'
					},
					{	
						id: 2,
						content: '内容 B',
						url: '/static/index/bg-Indonesia.png'
					},
					{	
						id: 3,
						content: '内容 C',
						url: '/static/index/banner1.jpg'
					}
				],
				current: 1
			}
		},
		onLoad() {},
		methods: {
			// 介绍
			changeSuggest(index){
				this.current = index
			},
			// 跳转
			jump(param){
				if(param == 'recharge'){
					uni.navigateTo({
						url: "./component/recharge/index",
						success() {
							
						}
					});
				} else if(param == 'cash'){
					uni.navigateTo({
						url: "./component/cashout/index",
						success() {
							
						}
					});
				}
			}
		}
	}
</script>
<style>
	/deep/ uni-swiper .uni-swiper-dot-active{
		background-color: #F59328;
		width: 50rpx;
		border-radius: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.content{
		height: 100%;
		overflow-x: hidden;
		background-color: #FFFFFF;
	}
	.main-container {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		padding: 0rpx 40rpx;
		.image1 {
			width: 350rpx;
			height: 60rpx;
		}

		.image2 {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.uni-padding-wrap {
		width: 100%;
		padding: 0rpx 40rpx;
		margin-top: 30rpx;
		height: 340rpx;
		uni-swiper{
			height: 340rpx;
		}
		uni-image{
			height: 280rpx;
		}
		.slide-image{
			width: 100%;
		}
	}
	.middle-nav{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0rpx 40rpx;
		.nav{
			padding: 30rpx;
		}
		.text{
			font-size: 30rpx;
			text-align: center;
		}
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	.member-news{
		width: 100%;
		height: 82rpx;
		line-height: 82rpx;
		background-color: #F4F6F8;
		padding-left: 40rpx;
		display: flex;
		.vip-active{
			margin-top: 23rpx;
			height: 40rpx;
			width: 6rpx;
			background-color: #F59328;
		}
		.text{
			font-size: 30rpx;
			margin-left: 20rpx;
		}
	}
	.shopping-wrap{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 120rpx;
		line-height: 120rpx;
		padding: 0rpx 40rpx;
		font-size: 30rpx;
		.commission{
			color: #FA6965;
		}
	}
	.void-wrap{
		height: 16rpx;
		background-color: #F4F6F8;
	}
	.suggest-wrap{
		display: flex;
		height: 70rpx;
		margin: 20rpx 40rpx;
		flex-direction: row;
		justify-content: space-between;
		font-size: 30rpx;
		border-bottom: 1px solid #F4F6F8;
		.nav-footer{
			font-size: 30rpx;
			display: flex;
			flex-direction: column;
		}
		.active{
			font-weight: bold;
		}
		image{
			margin-top: 10rpx;
			margin-left: 32rpx;
			width: 60rpx;
			height: 6rpx;
		}
	}
	.main-text{
		margin: 10rpx 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
		color: #333333;
		letter-spacing: 2rpx;
		line-height: 50rpx;
	}
</style>
